<template>
  <div id="map"></div>
</template>

<script>
/* eslint-disable */
import { Scene, HeatmapLayer, PointLayer, Popup } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import DataJson from './data.json';
import GridJson from './grid.json';
const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];
// import { CountryLayer } from '@antv/l7-district';
// const ProvinceData = [
//   {
//     name: '云南省',
//     code: 530000,
//     value: 17881.12
//   },
//   {
//     name: '黑龙江省',
//     code: 230000,
//     value: 16361.62
//   },
//   {
//     name: '贵州省',
//     code: 520000,
//     value: 14806.45
//   },
//   {
//     name: '北京市',
//     code: 110000,
//     value: 30319.98
//   },
//   {
//     name: '河北省',
//     code: 130000,
//     value: 36010.27
//   },
//   {
//     name: '山西省',
//     code: 140000,
//     value: 16818.11
//   },
//   {
//     name: '吉林省',
//     code: 220000,
//     value: 15074
//   },
//   {
//     name: '宁夏回族自治区',
//     code: 640000,
//     value: 3705.18
//   },
//   {
//     name: '辽宁省',
//     code: 210000,
//     value: 25315.35
//   },
//   {
//     name: '海南省',
//     code: 460000,
//     value: 4832.05
//   },
//   {
//     name: '内蒙古自治区',
//     code: 150000,
//     value: 17289.22
//   },
//   {
//     name: '天津市',
//     code: 120000,
//     value: 18809.64
//   },
//   {
//     name: '新疆维吾尔自治区',
//     code: 650000,
//     value: 12199.08
//   },
//   {
//     name: '上海市',
//     code: 310000,
//     value: 32679.87
//   },
//   {
//     name: '陕西省',
//     code: 610000,
//     value: 24438.32
//   },
//   {
//     name: '甘肃省',
//     code: 620000,
//     value: 8246.07
//   },
//   {
//     name: '安徽省',
//     code: 340000,
//     value: 30006.82
//   },
//   {
//     name: '香港特别行政区',
//     code: 810000,
//     value: 0
//   },
//   {
//     name: '广东省',
//     code: 440000,
//     value: 97277.77
//   },
//   {
//     name: '河南省',
//     code: 410000,
//     value: 48055.86
//   },
//   {
//     name: '湖南省',
//     code: 430000,
//     value: 36425.78
//   },
//   {
//     name: '江西省',
//     code: 360000,
//     value: 21984.78
//   },
//   {
//     name: '四川省',
//     code: 510000,
//     value: 40678.13
//   },
//   {
//     name: '广西壮族自治区',
//     code: 450000,
//     value: 20353.51
//   },
//   {
//     name: '江苏省',
//     code: 320000,
//     value: 92595.4
//   },
//   {
//     name: '澳门特别行政区',
//     code: 820000,
//     value: null
//   },
//   {
//     name: '浙江省',
//     code: 330000,
//     value: 56197.15
//   },
//   {
//     name: '山东省',
//     code: 370000,
//     value: 76469.67
//   },
//   {
//     name: '青海省',
//     code: 630000,
//     value: 2865.23
//   },
//   {
//     name: '重庆市',
//     code: 500000,
//     value: 20363.19
//   },
//   {
//     name: '福建省',
//     code: 350000,
//     value: 35804.04
//   },
//   {
//     name: '湖北省',
//     code: 420000,
//     value: 39366.55
//   },
//   {
//     name: '西藏自治区',
//     code: 540000,
//     value: 1477.63
//   },
//   {
//     name: '台湾省',
//     code: 710000,
//     value: null
//   }
// ];
export default {
  data() {
    return {
      data: DataJson,
      grid: GridJson,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const { data, grid } = this;
      const scene = new Scene({
        id: 'map',
        map: new Mapbox({
          style: 'blank',
          // style: 'amap://styles/cd13ace96a369f82fe2bc2d1bf74ef16',
          pitch: 0,
          center: [ 114.07737552216226, 22.542656745583486 ],
          // rotation: 39.19,
          zoom: 1,
        })
      });
      scene.on('loaded', () => {
        fetch(
          'https://gw.alipayobjects.com/os/bmw-prod/3dadb1f5-8f54-4449-8206-72db6e142c40.json'
        )
          .then(res => res.json())
          .then(res => {
            // new CountryLayer(scene, {
            //   data: ProvinceData,
            //   joinBy: [ 'NAME_CHN', 'name' ],
            //   depth: 1,
            //   provinceStroke: '#fff',
            //   cityStroke: '#EBCCB4',
            //   cityStrokeWidth: 1,
            //   // fill: {
            //   //   color: {
            //   //     field: 'NAME_CHN',
            //   //     values: colors
            //   //   }
            //   // },
            //   popup: {
            //     enable: true,
            //     Html: props => {
            //       return `<span>${props.NAME_CHN}</span>`;
            //     }
            //   }
            // });
            // console.log('data', res);
            const layer = new HeatmapLayer({
              autoFit: true,
              zIndex: 200,
            })
            .source(grid, {
              transforms: [
                {
                  type: 'hexagon',
                  size: 800000,
                  field: 'capacity',
                  method: 'sum',
                }
              ]
            })
            // .size('sum', [ 0, 600 ])
            .shape('hexagon')
            // .active(true)
            .color('#ddd')
            .style({
              angle: 0,
              coverage: 0.8,
              // opacity: 0.8,
            })
            const pointerLayer = new PointLayer({
              autoFit: true,
              zIndex: 2000,
            })
            .source(data)
            .shape('circle')
            .size('cum_conf', [1, 25])
            .scale({
              values: {
                color: {
                  field: 'cum_conf',
                  type: 'quantile',
                },
                size: {
                  field: 'cum_conf',
                  type: 'log',
                },
              },
            })
            .color('cum_conf', colors)
            .active({
              option: {
                color: '#0c2c84',
              },
            })
            .style({
              opacity: 0.8, 
              offsets: [0, 0]
              // stroke: 'white',
            })
            // .animate({
            //   rings: 1
            // })
            const pointerLayer1 = new PointLayer({
              autoFit: true,
              zIndex: 30000,
            })
            .source(data)
            .scale({
              values: {
                color: {
                  field: 'cum_conf',
                  type: 'quantile',
                },
                size: {
                  field: 'cum_conf',
                  type: 'log',
                },
              },
            })
            .color('cum_conf', "#fff")
            .shape('Short_Name_ZH', 'text')
            .size(12)
            .filter('cum_conf', (val) => val > 2000)
            .style({
              opacity: 0.8,
              strokeOpacity: 1,
              strokeWidth: 0,
            })
            let instance = null;
            // scene.addPopup(pop);
            pointerLayer.on('mousemove', (ev) => {
              const popup = new Popup({
                offsets: [ 0, 20 ],
                closeButton: false
              })
                .setLnglat(ev.lngLat)
                .setHTML(`<span>${ev.feature.properties.Short_Name_ZH}</span>`);
              scene.addPopup(popup);
              instance = popup;
            }); // 鼠标在图层上移动时触发

            pointerLayer.on('unmousemove', () => {
              instance && instance.remove();
            })

            scene.addLayer(layer);
            scene.addLayer(pointerLayer);
            scene.addLayer(pointerLayer1);
            scene.render();
          });
      });
    }
  },
}
</script>

<style>
 #map {
   position: relative;
   height: 500px;
 }
</style>